<template>
  <a-form :form="form">
    <!-- <a-form-item label="来源">
      <a-input v-model="detail.sourceId"></a-input>
    </a-form-item> -->
    <a-form-item label="名称">
      <a-input v-decorator="['name']"></a-input>
    </a-form-item>
    <a-form-item label="作者">
      <a-input v-decorator="['author']"></a-input>
    </a-form-item>
       <a-form-item label="分类">
      <a-input v-decorator="['kind']"></a-input>
    </a-form-item>
    <a-form-item label="封面">
      <a-input  v-decorator="['coverUrl']"></a-input>
    </a-form-item>
        <a-form-item label="bookUrl">
      <a-input v-decorator="['bookUrl']"></a-input>
    </a-form-item>
    <a-form-item>
      <a-button type="primary" @click="submit">更新</a-button>
    </a-form-item>
  </a-form>
</template>

<script>
import { getNovel, editNovel } from '@/api'
export default {
  props: {
    id: {
      type: String
    }
  },
  data () {
    return {
      detail: {},
      form: this.$form.createForm(this),
    }
  },
  created () {
    this.getDetail()
  },
  methods: {
    getDetail () {
      getNovel({ id: this.id }).then(res => {
        console.log(this)
        const { name, author, kind, coverUrl, bookUrl } = res
        this.detail = res
        this.$nextTick(() => {
          this.form.setFieldsValue({ name, author, kind, coverUrl, bookUrl })
        })
      }).catch(e => {
          this.$message.error(e.message)
        })
    },
    submit () {
      // if (!this.detail.sourceId) {
      //   this.$message.error('请输入来源ID！')
      //   return
      // }
      this.form.validateFields( (err, values) => {
        if (err) return
      editNovel({_id: this.id, ...values}).then(() => {
        this.$message.success('更新成功')
        this.getDetail()
      }).catch(e => {
          this.$message.error(e.message)
        })
        // this.$router.push('/source/list')
      })

    }
  }
}
</script>

<style>

</style>